<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>同咨科技-商户后台</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../static/css/weadmin.css">
    <link href="../../lib/layui/css/layui.css" rel="stylesheet">

 



    <script type="text/javascript" src="../../lib/layui/layui.js" charset="utf-8"></script>
    <script type="module" src="../components/use-body.js"></script>



    <link href="../../static/css/design.css" rel="stylesheet">
    <link href="../../static/css/uselay.css" rel="stylesheet">
</head>

<body>
    <use-body>
        <div class="page-body">
            <span class="layui-breadcrumb breadcrumb" lay-separator="/">
                <a><i title="首页" class="iconfont use-more"></i></a>
                <a>设计大厅</a>
                <a><cite>合成图纸</cite></a>
            </span>
            <div class="steps" style="width:750px">
                <div class="step active" style="flex-basis: 25%;">
                    <div class="text">
                        <strong>01</strong>
                        完善图框信息
                    </div>
                    <div class="line"></div>
                    <div class="icon">
                        <i class="iconfont use-chenggong"></i>
                    </div>
                </div>
                <div class="step active" style="flex-basis: 25%;">
                    <div class="text">
                        <strong>02</strong>
                        选择通用图纸
                    </div>
                    <div class="line"></div>
                    <div class="icon">
                        <i class="iconfont use-chenggong"></i>
                    </div>
                </div>
                <div class="step active last" style="flex-basis: 25%;">
                    <div class="text">
                        <strong>03</strong>
                        预览合成效果
                    </div>
                    <div class="line"></div>
                    <div class="icon">
                        <i class="layui-icon layui-icon-radio"></i>
                    </div>
                </div>
                <div class="step" style="flex-basis: 25%;max-width: 110px;">
                    <div class="text">
                        <strong>04</strong>
                        合成成功
                    </div>
                    <div class="line"></div>
                    <div class="icon">
                        <i class="layui-icon layui-icon-radio"></i>
                    </div>
                </div>
            </div>
            <div class="design page-border">
                <div class="drawing-select">
                    <div class="layui-row space25">
                        <div class="layui-col-xs6">
                            <div class="view">
                                <img src="../../static/images/view2.png" alt="">
                            </div>
                            <div class="view-tag">
                                <div class="layui-inline">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">适合类型</label>
                                        <div class="layui-input-block">
                                            道路工程
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">适合专业</label>
                                        <div class="layui-input-block">
                                            排水专业
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="view">
                                <img src="../../static/images/view2.png" alt="">
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <table class="layui-hide" id="ID-table-demo-data"></table>
                            <div class="add-btn" lay-on="add-dialog">
                                <i class="iconfont use-add"></i>
                                <span>添加更多图纸</span>
                            </div>
                        </div>
                    </div>
                    <div class="btn-center" style="text-align: right;">
                        <button type="button" class="layui-btn layui-btn-primary btn-text">取消</button>
                        <button type="button" class="layui-btn">保存图纸选择</button>
                        <button type="button" class="layui-btn">合成图纸</button>
                    </div>
                </div>
            </div>
        </div>

        <div id="ID-test-layer-wrapper" style="display: none;">
            <div class="drawing-select-dialog dialog">
                <div class="layui-tab layui-tab-brief">
                    <ul class="layui-tab-title">
                      <li class="layui-this">设计大厅</li>
                      <li>我的收藏</li>
                    </ul>
                    <div class="layui-tab-content">
                      <div class="layui-tab-item layui-show">
                        <form class="layui-form" action="">
                            <div class="layui-row space25">
                                <div class="layui-col-xs6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">图纸名称</label>
                                        <div class="layui-input-block">
                                          <input type="text" name="username" placeholder="输入内容" autocomplete="off" class="layui-input">
                                        </div>
                                      </div>
                                </div>
                                <div class="layui-col-xs6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">适合类型</label>
                                        <div class="layui-input-block">
                                            <select name="interest" >
                                                <option value=""></option>
                                                <option value="0">写作</option>
                                                <option value="1" selected>阅读</option>
                                                <option value="2">游戏</option>
                                                <option value="3">音乐</option>
                                                <option value="4">旅行</option>
                                              </select>
                                        </div>
                                      </div>
                                </div>
                            </div>
                            
                        </form>
                        <div class="drawing-list">
                            <ul>
                                <li>
                                    <img src="../../static/images/view2.png" alt="">
                                    <span>我是图纸名称</span>
                                    <p>适合类型：市政工程</p>
                                    <input type="checkbox" name="AAA">
                                </li>
                                <li>
                                    <img src="../../static/images/view2.png" alt="">
                                    <span>我是图纸名称</span>
                                    <p>适合类型：市政工程</p>
                                    <input type="checkbox" name="AAA">
                                </li>
                                <li>
                                    <img src="../../static/images/view2.png" alt="">
                                    <span>我是图纸名称</span>
                                    <p>适合类型：市政工程</p>
                                    <input type="checkbox" name="AAA">
                                </li>
                                <li>
                                    <img src="../../static/images/view2.png" alt="">
                                    <span>我是图纸名称</span>
                                    <p>适合类型：市政工程</p>
                                    <input type="checkbox" name="AAA">
                                </li>
                                <li>
                                    <img src="../../static/images/view2.png" alt="">
                                    <span>我是图纸名称</span>
                                    <p>适合类型：市政工程</p>
                                    <input type="checkbox" name="AAA">
                                </li>
                                <li>
                                    <img src="../../static/images/view2.png" alt="">
                                    <span>我是图纸名称</span>
                                    <p>适合类型：市政工程</p>
                                    <input type="checkbox" name="AAA">
                                </li>
                                <li>
                                    <img src="../../static/images/view2.png" alt="">
                                    <span>我是图纸名称</span>
                                    <p>适合类型：市政工程</p>
                                    <input type="checkbox" name="AAA">
                                </li>
                            </ul>
                        </div>
                        <div id="demo-laypage-layout" style="text-align: right;"></div>
                      </div>
                      <div class="layui-tab-item">内容-2</div>
                    </div>
                  </div>

                  <div class="dialog-footer">
                    <!-- 主体 -->
                    <div class="cent">
                        <button type="button" class="layui-btn btn-text">取消</button>
                        <button type="button" class="layui-btn layui-btn-radius">确定</button>
                    </div>
                </div>
            </div>
            
        </div>
    </use-body>
</body>
<!-- 工具栏模板 -->
<script type="text/html" id="operate-btn">
    <div class="operate-btn">
      <i class="iconfont use-delete layui-btn layui-btn-sm btn-text" style="color: #F74A4A !important;"></i>
    </div>
  </script>
<script>
    layui.use(function () {
        var upload = layui.upload;
        var $ = layui.$;
        var table = layui.table;
        var util = layui.util;

        var laypage = layui.laypage;
        // 自定义排版
        laypage.render({
            elem: 'demo-laypage-layout',
            count: 1000,
            layout: ['count', 'prev', 'page', 'next','limit']
        });

        // 渲染
        upload.render({
            elem: '#ID-upload-demo-drag',
            url: 'https://httpbin.org/post', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            done: function (res) {
                layer.msg('上传成功');
                $('#ID-upload-demo-preview').removeClass('layui-hide')
                    .find('img').attr('src', res.files.file);
                console.log(res)
            }
        });
        

        

        util.on('lay-on', {
            'add-dialog': function () {
                layer.open({
                    type: 1,
                    shade: false, // 不显示遮罩
                    content: $('#ID-test-layer-wrapper'), // 捕获的元素
                    title: '选择图纸',
                    closeBtn: 1,
                    end: function () {
                        // layer.msg('关闭后的回调', {icon:6});
                    }
                });
            },
        })

        // 已知数据渲染
        var inst = table.render({
            elem: '#ID-table-demo-data',
            cols: [[ //标题栏
                { field: 'username', title: '图纸名称'},
                { field: 'username', title: '编号前缀'},
                { field: 'sign', title: '编号'},
                { field: 'username', title: '操作', align: 'center',toolbar: '#operate-btn' }
            ]],
            skin: 'nob', // 表格风格
            className: 'layui-table-drawing-select', // 用于给表格主容器追加 css 类名
            data: [{
                "id": "10006",
                "username": "张三6",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "12"
            }, {
                "id": "10007",
                "username": "张三7",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "16"
            }, {
                "id": "10008",
                "username": "张三8",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "106"
            }],
            //skin: 'line', // 表格风格
            //even: true,
            page: false
        });
    });
</script>

</html>